<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>tuling test</title>

    <!-- 新 Bootstrap 核心 CSS 文件   -->
	<link rel="stylesheet" href="//cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css">
	<link rel="stylesheet" href="common.css">
	   <link href="http://libs.baidu.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
   <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
   <script src="http://libs.baidu.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
   	<link rel="stylesheet" type="text/css" href="sg.css"> 
	<link rel="stylesheet" type="text/css" href="animate.css">
	<link rel="stylesheet" type="text/css" href="zhinengkefu.css"> 
	
	
  </head>
  <body>	 


	<!-- <div class="container-fluid divBlock"> 
		<div class="row">   
			<input type="text" id="zn_info" placeholder="input" name="info" class=" span10 text-info zn_input" />
			<button type="button" id="zn_btn" class="btn btn-primary span2" style="margin-left:auto;margin-right:auto;">按钮</button>
			<div class="content" style="border:1px solid #DDD;"></div>
		</div> 
	</div> --> 
	
	<div class="container-fluid divBlock">
		<div class="row">   
			<div class="zn_header">
  				<input type="text" id="zn_info" placeholder="input" name="info" class="zn_input" />
				<button type="button" id="zn_btn" class="btn btn-primary">按钮</button>
			</div>
			<div class="content"></div>  
		</div>  
	</div>
	
	<script type="text/javascript">
		$(function(){
			$('#zn_btn').click(function(){
				var value=$('#zn_info').val(); 
				$(".content").prepend("<div class='items animated rotateIn left'>我： "+value+"</div>");
				$.ajax({
					type:"post",  
					url:"http://www.tuling123.com/openapi/api?key=991bb8fbb66a07ae828ff130c7785cab",
					data:{info:value},
					success:function(data){ 
						eval(data); 
						$(".content").prepend("<div class='items animated rotateIn right'>"+data.text+"</div>");
					}
				});
			})
		})
			
		
	</script> 
	
	
	
	<!--  js 开始 -->
	<!-- 将 js 文件写到最后 ， 提升加载速度 -->
	<!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
	<script src="//cdn.bootcss.com/jquery/1.11.3/jquery.min.js"></script>
	
	<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
	<script src="//cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	
	<!--  js 结束 -->
  </body>
</html>